<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
		#note{
			width:400px;
			height: 600px;
			/* border: 1px solid black ; */
			border-radius: 0.375rem;
			position: absolute;
			left: 26.25rem;
			box-shadow: 6px 6px 12px gray;
		}
		#ip1{
			width: 380px;
			height: 30px;
			border: 0rem;
			outline: none;
			line-height:30px ;
			font-size: 1.25rem;
			padding-left: 10px;
			
		}
		#removeMsg{
			background-color: #FFFFFF;
			border: 0px;
			outline: none;
			position: absolute;
			left:350px
		}
		#clear{
			background-color: #FFFFFF;
			border: 0px;
			outline: none;
			margin-left: 240px;
		}
		
		</style>
	</head>
	<body>
		<!-- 结合常用vue指令完成如下功能：
		页面上为一个记事本，可以进行输入内容
		在记事本中，有几条已经存在的内容记录，
		当输入内容回车后，新添加的内容，添加到原有的记事本列表中进行显示
		在每条记录右侧，可以点击并删除该条记录。
		在页面左下角显示共有多少条记录
		页面右下角可以点击清空，删除所有记录 -->
		<div id="app">
			<div id="note">
				<div style="text-align: center;color: red;">
					<h2>记事本</h2>
				</div>
				<div>
					<input id="ip1" type="text" placeholder="请输入。。。" 
					v-model="iptMsg" @keydown.enter="addMsg()"/>
					<hr />
				</div >
				<!-- 显示列表中数据的区域 -->
				<div style="height: 400px;padding-left: 10px;">
					<h6 v-for="item,index in msg">
						{{index+1}} {{item}}
						<button id="removeMsg" @click="removeMsg(index)">&times;</button>
					</h6>
					
				</div>
				<div v-show="msg.length!=0">
					<hr />
					<span>共有 {{msg.length}}条数据</span>
					<button id="clear" @click="clearMsg()">清空</button>
				</div>			
			</div>
			
		</div>
		<script>
		var app=new Vue({
			el:"#app",
			data:{
				iptMsg:"",
				msg:["吃饭饭","睡觉觉","打豆豆"]
				
			},
			methods:{
				addMsg:function(){
					this.msg.push(this.iptMsg)
					this.iptMsg=""
				},
				removeMsg:function(index){
					this.msg.splice(index,1)
				},
				clearMsg:function(){
					this.msg=[]
				}
				
			}
		})
		</script>
		
		
	</body>
</html>
